<template>
	<view class="e-code-button">
		<e-button :customStyle="customStyle" :appearance="props.appearance" :type="props.type" :size="props.size" :shape="props.shape"
			:plain="props.plain" :text="buttonText" @click="handleClick"></e-button>
		<e-code ref="eCodeRef" :seconds="props.seconds" :startText="props.startText" :changeText="props.changeText" :endText="props.endText"
			:keepRunning="props.keepRunning" :uniqueKey="props.uniqueKey" @change="handleChange"></e-code>
	</view>
</template>
<script lang="ts">
	import {
		defineComponent
	} from 'vue'
	import mpMixin from '../../libs/mixin/mpMixin'
	/**
	 * CodeButton 获取验证码按钮
	 * @tutorial https://www.uviewui.com/components/code.html
	 * @property {String}			type			按钮的预置样式，info，primary，error，warning，success (默认 'info' )
	 * @property {String}			size			按钮尺寸，large，normal，small，mini （默认 normal）
	 * @property {String}			shape			按钮形状，circle（两边为半圆），square（带圆角） （默认 'square' ）
	 * @property {Boolean}			plain			按钮是否镂空，背景色透明 （默认 false）
	 * @property {Boolean}			disabled		是否禁用 （默认 false）
	 * @property {Object}			customStyle 	自定义按钮样式
	 * @property {String | Number}	seconds			倒计时所需的秒数（默认 60 ）
	 * @property {String}			startText		开始前的提示语，见官网说明（默认 '获取验证码' ）
	 * @property {String}			changeText		倒计时期间的提示语，必须带有字母"x"，见官网说明（默认 'X秒重新获取' ）
	 * @property {String}			endText			倒计结束的提示语，见官网说明（默认 '重新获取' ）
	 * @property {Boolean}			keepRunning		是否在H5刷新或各端返回再进入时继续倒计时（ 默认false ）
	 * @property {String}			uniqueKey		为了区分多个页面，或者一个页面多个倒计时组件本地存储的继续倒计时变了
	 *
	 * @event {Function}	click	点击按钮
	 * @example <e-code-button  @click="getCode" seconds="20"></e-code-button>
	 */
	export default defineComponent({
		name: 'e-code-button',
		mixins: [mpMixin]
	})
</script>
<script lang="ts" setup>
	import {
		ref,
		toRefs
	} from 'vue'
	import {
		codeButtonProps,
		codeButtonEmits
	} from './props'
	import {
		useDefaultProps
	} from '../../libs/hooks'
	import type {
		CodeInstance
	} from '../../typing'
	import componentsProps, {
		type DefaultProps
	} from "../../libs/config/componentsProps";

	const {
		codeButton: codeButtonDefaultProps
	} = toRefs(componentsProps);

	const _props = defineProps(codeButtonProps)
	const props = useDefaultProps < DefaultProps['codeButton'] > (_props, codeButtonDefaultProps);

	const emit = defineEmits(codeButtonEmits)

	const eCodeRef = ref < CodeInstance | null > (null)
	const buttonText = ref(`${props.value.startText}`)
	const handleClick = () => {
		if (eCodeRef.value?.canGetCode) {
			emit('click')
		}
	}
	const handleChange = (text: string) => {
		buttonText.value = text
	}
	const start = () => {
		if (eCodeRef.value?.canGetCode) {
			eCodeRef.value?.start()
		}
	}
	const reset = () => {
		eCodeRef.value?.reset()

	}
	defineExpose({
		/** @description start count down */
		start,
		/** @description reset count down */
		reset
	})
</script>
<style lang="scss"></style>
